<template>
    <div>
        <Card v-if="isNone">您尚未预约任何拍卖，请随便逛逛</Card>
        <Card v-for="(item,index) in appointmentList" :value="item.appointmentId" :key="item.appointmentId">
            <Row>
                <Col>
                    {{ index }}-{{ leftTimeList[index] }}-{{ item.appointmentAuctionName }}
                </Col>
                <Col>
                    <Button @click="cancelAppointment(item.appointmentId,index)">取消预约</Button>
                </Col>
            </Row>
        </Card>
        <Row>
            <Col class="mid">
                <Page :total="totalAppointmentNum" @on-change="handlePage" show-total/>
            </Col>
            <Col>
                <Button type="warning" @click="removeAllOverdue">取消所有过期预约</Button>
            </Col>
        </Row>
        <Modal
                v-model="cancelCheck"
                title="确认取消该预约？"
                @on-ok="ok"
                @on-cancel="cancel">
            <p>此操作不可撤销</p>
        </Modal>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "AuctionAppointment",
        data() {
            return {
                readyToCancelId: 0,
                readyToCancelIndex: 0,
                cancelCheck: false,
                isNone: true,
                appointmentList: [],
                leftTimeList: [],
                nowPage: 1,
                totalAppointmentNum: 0
            }
        },
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: '/auction/appointment/' + globalData.USER.userId + "/1"
            }).then(function (res) {
                self.appointmentList = res.data.content
                self.totalAppointmentNum = res.data.totalElements
                if (self.totalAppointmentNum != 0)
                    self.isNone = false
                //获取全部预约的剩余时间
                //清除剩余预约时间列表
                self.leftTimeList.splice(0, self.leftTimeList.length)
                const nowTime = new Date().getTime();
                console.log("当前时间" + nowTime)
                for (let i = 0; i < self.appointmentList.length; i++) {
                    //从appointment中获取即可
                    console.log("enter")
                    let tempTime = ""
                    let leftTime = Math.round((self.appointmentList[i].appointmentAuctionTimeStamp - nowTime) / 60000)//分钟
                    console.log(leftTime)
                    if (leftTime < 0 && leftTime > -60)
                        tempTime = "拍卖正在进行"
                    if (leftTime < -60)
                        tempTime = "拍卖已结束"
                    if (leftTime > 60) {
                        if (leftTime > 1440) {
                            tempTime = Math.floor(leftTime / 60 / 24) + "天" + Math.floor(leftTime % 1440 / 60) + "小时"
                        } else
                            tempTime = Math.floor(leftTime / 60) + "小时" + Math.round(leftTime % 60) + "分钟"
                    }

                    console.log(tempTime)
                    self.leftTimeList.push(tempTime)
                }
                console.log("LTL" + self.leftTimeList[0])
            })
        },
        methods: {
            ok() {
                this.appointmentList.splice(this.readyToCancelIndex, 1)
                // console.log("TAL"+this.appointmentList)
                // console.log(this.readyToCancelIndex)
                this.totalAppointmentNum -= 1
                let self = this
                axios({
                    method: 'delete',
                    url: "/auction/appointment/" + this.readyToCancelId
                }).then(function () {
                    self.$Notice.success({
                        title: "删除成功"
                    })
                })
            },
            cancel() {

            },
            handlePage(value) {
                this.nowPage = value
                console.log(this.nowPage)
                this.search()
            },
            search() {
                let self = this
                axios({
                    method: 'get',
                    url: '/auction/appointment/' + globalData.USER.userId + "/" + this.nowPage
                }).then(function (res) {
                    self.appointmentList = res.data.content
                })
            },
            cancelAppointment(appointmentId, index) {
                this.readyToCancelId = appointmentId
                this.readyToCancelIndex = index
                console.log("INDEX" + this.readyToCancelIndex)
                this.cancelCheck = true
            },
            removeAllOverdue() {
                // let self = this
                let exist = false
                for (let i = 0; i < this.leftTimeList.length; i++) {
                    if (this.leftTimeList[i] == ("拍卖已结束")) {
                        exist=true
                        console.log("yes" + i)
                        let readyToRemoveId = this.appointmentList[i].appointmentId
                        //后端
                        axios({
                            method: 'delete',
                            url: "/auction/appointment/" + readyToRemoveId
                        })
                        // 前端，这里如果在then中splice的话，
                        // 可能会因为ajax的异步访问导致这一个请求结束之后（下一个请求已经开始）
                        // 再删除的话，可能会导致下一个的删除异常，即删错了
                        this.leftTimeList.splice(i,1)
                        this.appointmentList.splice(i,1)
                    }
                }
                if(exist)
                    this.$Message.success("清除成功")
                else
                    this.$Message.warning("无过期预约")
            }
        }
    }
</script>

<style scoped>
    .mid {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }
</style>